<template>
    <div class="pop">
        <img src="../assets/shuiwu/pop.png" >

        <!-- <ul class="pop-text">
          <li>22</li>
          <li>22</li>
          <li>22</li>
          <li>22</li>
          <li>22</li>
         
        </ul> -->
        <table class="pop-text">
          <tr><td width="120">输出电压:</td><td>{{ shuiku.dianya }} V</td></tr>
          <tr><td>输出电流:</td><td>{{ shuiku.dianliu }} A</td></tr>
          <tr><td>泵组温度:</td><td>{{ shuiku.wendu }} ℃</td></tr>
          <tr><td>正向功率:</td><td>{{ shuiku.gonglv }} KW</td></tr>
          <!-- <tr><td>泵组频率:</td><td>{{ shuiku.pinlv }} Hz</td></tr> -->


        </table>

    </div>
  </template>
  <script  setup lang="ts">
import { onMounted,ref,toRefs,reactive } from "vue";
import {prodApi} from "@/utils/shuiwu/api"
const state=reactive({
  shuiku:{
    dianya:0,
    dianliu:0,
    wendu:0,
    gonglv:0,
    pinlv:0
  }
  
})

let {shuiku}=toRefs(state)

onMounted(() => {
  getShuiKu(630);
  getWendu(642)
});



function getShuiKu(id:number){
  prodApi(id).then(res=>{
    let arr=res.rows as any;
    for(let i=0; i<arr.length; i++){
      if(arr[i].modelId==4848   ){
        state.shuiku.dianya= arr[i].value
        
      }
      if(arr[i].modelId==4852   ){
        state.shuiku.dianliu= arr[i].value
        
      }
  
      if(arr[i].modelId==4859   ){
        state.shuiku.gonglv= arr[i].value
        
      }
     
    }
  })
}
function getWendu(id:number){
  prodApi(id).then(res=>{
    let arr=res.rows as any;
    for(let i=0; i<arr.length; i++){
     
  
      if(arr[i].modelId==4718   ){
        state.shuiku.wendu= arr[i].value
        
      }
      
    }
   

  })
}




</script>
  <style scoped>
  .pop{
    height:420px;
    width:460px;
    position:relation;
  }
  .pop img{
    width:460px;
  }
.pop .pop-text{
  box-sizing: border-box;
  position: absolute;
  top:138px;
  left: 66px;
  width:362px;
}
.pop .pop-text td{
  list-style: none;
  height: 48px;
  color: #fff;
  font-size: 21px;
 
}



  </style>